<template>
    <view class="main" :style="{height: height}">
        <slot></slot>
    </view>
</template>
<script>
export default {
    computed:{
        height(){
            const { height: capsuleHeight,top } =   uni.getMenuButtonBoundingClientRect();
            const statusBarHeight = top;
            const navBarHeight = capsuleHeight + 6;
            const allNavHeight = statusBarHeight + navBarHeight;
            return `calc(100% - ${allNavHeight}px)`
        }
    }
}
</script>
<style lang="scss">
.main {
    width: 100%;
    margin-top: -58px;
    z-index: 20;
    position: absolute;
    overflow: scroll;
}
</style>